body{

padding-top:55px;

}


body{
background:#0a0f1c;
color:#00ff9c;
font-family:monospace;
margin:0;
}

.header{
background:#111;
padding:10px;
text-align:center;
}

.tabs{
background:#111;
padding:10px;
}

.tabs button{
margin-right:5px;
}

.tab{
display:none;
padding:20px;
}

.metric{
font-size:20px;
margin:10px;
}

table{
width:100%;
border-collapse:collapse;
}

td,th{
border:1px solid #00ff9c;
padding:10px;
}

#ipl-screen{
text-align:center;
padding:80px;
}

#consoleOutput{
background:black;
height:300px;
overflow:auto;
padding:10px;
margin-bottom:10px;
}

#incident{
background:red;
color:white;
padding:10px;
display:none;
text-align:center;
font-weight:bold;
}

.blog-section{

padding:40px;

}

.blog-title{

text-align:center;
font-size:28px;
margin-bottom:30px;
color:#00ff9c;

}

.blog-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:25px;

}

.blog-card{

background:#111827;
border-radius:10px;
padding:10px;
text-decoration:none;
color:white;
transition:0.3s;

}

.blog-card:hover{

transform:scale(1.03);
box-shadow:0 0 15px #00ff9c;

}

.blog-card h3{

font-size:18px;
color:#00ff9c;
margin-bottom:10px;

}

.blog-card iframe{

width:100%;
height:200px;
border:none;
border-radius:6px;

}


.social-hub{

padding:40px;

}

.hub-title{

text-align:center;
font-size:28px;
margin-bottom:30px;
color:#00ff9c;

}

.hub-grid{

display:grid;

grid-template-columns:repeat(6,1fr);

gap:20px;

}

.hub-card{

background:#111827;

border-radius:10px;

padding:10px;

transition:0.3s;

display:flex;

flex-direction:column;

}

.hub-card:hover{

transform:scale(1.03);

box-shadow:0 0 15px #00ff9c;

}

.hub-card h3{

font-size:14px;

color:#00ff9c;

text-align:center;

margin-bottom:10px;

}

.hub-card iframe{

width:100%;

height:350px;

border:none;

border-radius:6px;

background:white;

}

.hub-actions{

display:flex;

justify-content:space-around;

margin-top:10px;

}

.hub-actions button{

background:#0f172a;

color:#00ff9c;

border:1px solid #00ff9c;

padding:6px 10px;

border-radius:5px;

cursor:pointer;

transition:0.2s;

}

.hub-actions button:hover{

background:#00ff9c;

color:#000;

}

.social-hub{

padding:40px;

}

.hub-title{

text-align:center;
font-size:28px;
margin-bottom:30px;
color:#00ff9c;

}

.hub-grid{

display:grid;

grid-template-columns:repeat(6,1fr);

gap:20px;

}

.hub-card{

background:#111827;

border-radius:10px;

padding:10px;

transition:0.3s;

display:flex;

flex-direction:column;

}

.hub-card:hover{

transform:scale(1.03);

box-shadow:0 0 15px #00ff9c;

}

.hub-card h3{

font-size:14px;

color:#00ff9c;

text-align:center;

margin-bottom:10px;

}

.hub-card iframe{

width:100%;

height:350px;

border:none;

border-radius:6px;

background:white;

}

.hub-actions{

display:flex;

justify-content:space-around;

margin-top:10px;

}

.hub-actions button{

background:#0f172a;

color:#00ff9c;

border:1px solid #00ff9c;

padding:6px 10px;

border-radius:5px;

cursor:pointer;

transition:0.2s;

}

.hub-actions button:hover{

background:#00ff9c;

color:#000;

}

#dashboard {
display:none;
}


.lab-buttons{

display:flex;
gap:10px;
margin:10px 0;

}

.lab-buttons button{

background:#111;
color:#00ff9c;
border:1px solid #00ff9c;
padding:6px 12px;
cursor:pointer;
font-family:monospace;

}

.lab-buttons button:hover{

background:#00ff9c;
color:#000;

}

.knowledge{

padding:40px;

}

.subtitle{

text-align:center;
margin-bottom:30px;
color:#88ffaa;

}

.knowledge-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;

}

.knowledge-card{

background:#111;
border:1px solid #00ff9c;
padding:15px;
border-radius:6px;

}

.knowledge-card h3{

color:#00ff9c;
font-size:16px;

}

.knowledge-card iframe{

width:100%;
height:220px;
border:none;
background:black;

}

.knowledge-card button{

margin-top:10px;
background:black;
color:#00ff9c;
border:1px solid #00ff9c;
padding:6px 12px;
cursor:pointer;
font-family:monospace;

}

.knowledge-card button:hover{

background:#00ff9c;
color:black;

}

/* =========================================
IBM S360 LED PANEL
========================================= */

.s360-panel{

position:fixed;
top:0;
left:0;

width:100%;
height:50px;

background:black;

display:flex;
justify-content:center;
align-items:center;

border-bottom:2px solid #00ff9c;

z-index:9999;

}

.s360-panel img{

height:50px;
width:640px;
object-fit:cover;

}

/* =========================================
IBM S360 LED PANEL
========================================= */

.s360-panel{

position:fixed;
top:0;
left:0;

width:100%;
height:50px;

background:black;

display:flex;
justify-content:center;
align-items:center;

border-bottom:2px solid #00ff9c;

z-index:9999;

}

/* LED container */

.led-row{

display:flex;
gap:6px;

}

/* LED */

.led{

width:10px;
height:10px;

border-radius:50%;

background:#111;

box-shadow:0 0 5px #000;

}

/* cores */

.led.green{
background:#00ff00;
box-shadow:0 0 6px #00ff00;
}

.led.yellow{
background:#ffff00;
box-shadow:0 0 6px #ffff00;
}

.led.red{
background:#ff0000;
box-shadow:0 0 6px #ff0000;
}